<template>
  <v-app class="buyNft">
    <div class="blind-box-top">
      <div class="task-info">
        <div class="icon">
          <div class="icon-view">
            <div class="icon-inner"></div>
          </div>
        </div>
        <div class="info">
          <div class="title">JOJO NFT Blind Box</div>
          <div class="brief">Remaining Amount: <span>0</span></div>
          <div class="times">
            <div class="time-title">Ended</div>
            <div class="time-values">
              <!----><span class="time-item">00</span
              ><span class="time-sep">:</span><span class="time-item">00</span
              ><span class="time-sep">:</span><span class="time-item">00</span>
            </div>
          </div>
          <div class="datas">
            <div class="data-item">
              <div class="item-title">
                Price
                <div class="payment-list">
                  <div class="payment-item selected">
                    <!---->
                    <div class="item-inner">
                      <img src="@/assets/images/blindBox/iconMark.png" />BNB
                    </div>
                  </div>
                  <div class="payment-item">
                    <span class="sep"></span>
                    <div class="item-inner">
                      <img src="@/assets/images/blindBox/iconLogo.png" />JOJO
                    </div>
                  </div>
                </div>
              </div>
              <div class="item-value">
                <img src="@/assets/images/blindBox/iconMark.png" />0.3<span>
                  ≈ $123</span
                >
              </div>
            </div>
          </div>
          <div class="buttons">
            <a class="common-button button-primary">Buy Now</a>
          </div>
        </div>
      </div>
      <div class="common-item-separation"></div>
      <div class="task-operate">
        <div class="title">NFT Details</div>
        <div class="nft-list">
          <div class="nft-item" v-for="(nftItem, idx) in nftList" :key="idx">
            <div class="nft-inner" :style="{ background: nftItem.bg }">
              <img :src="nftItem.icon" />
            </div>
            <div class="nft-title">{{ nftItem.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </v-app>
</template>
<script>
export default {
  data: () => ({
    nftList: [
      {
        icon: "https://dl0d5jadwbp9c.cloudfront.net/cdn/img/89c98fd3df5bac60ad3bd5813d5da7cf.png",
        name: "JOJO Farmer",
        bg: "radial-gradient(rgb(173, 238, 255), rgb(38, 179, 255))",
      },
      {
        icon: "https://dl0d5jadwbp9c.cloudfront.net/cdn/img/d56210ef05348af70ee4a8eab3d6e05f.png",
        name: "JOJO Chef",
        bg: "radial-gradient(rgb(255, 241, 255), rgb(249, 66, 255))",
      },
      {
        icon: "https://dl0d5jadwbp9c.cloudfront.net/cdn/img/a0d66c926a63dcaad582e4e2076c8a11.png",
        name: "JOJO Doctor",
        bg: "radial-gradient(rgb(255, 248, 204), rgb(250, 213, 81))",
      },
      {
        icon: "https://dl0d5jadwbp9c.cloudfront.net/cdn/img/597b326f9184e1f8dcf5751327bf4d6c.png",
        name: "JOJO Engineer",
        bg: "radial-gradient(rgb(199, 255, 240), rgb(18, 226, 138))",
      },
      {
        icon: "https://dl0d5jadwbp9c.cloudfront.net/cdn/img/763b0e11019c82328da88cff61bed871.png",
        name: "JOJO Knight",
        bg: "radial-gradient(rgb(197, 255, 251), rgb(10, 215, 190))",
      },
      {
        icon: "https://dl0d5jadwbp9c.cloudfront.net/cdn/img/fbbd532736ae17d6dde5719719f2d6b5.png",
        name: "JOJO Scientist",
        bg: "radial-gradient(rgb(255, 195, 188), rgb(255, 98, 79))",
      },
    ],
    menuIndex: 0,
  }),
  mounted() {},
  methods: {},
};
</script>
<style  lang="scss" scoped>
@import "./../common/styles/common.scss";
.buyNft {
  background: #f7f7f7 !important;
  .blind-box-top {
    background: #fff;
    -webkit-box-shadow: 0 10px 15px -3px rgb(0 0 0 / 3%),
      0 4px 6px -2px rgb(0 0 0 / 1%);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 3%), 0 4px 6px -2px rgb(0 0 0 / 1%);
    position: relative;
    border-radius: 32px;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    @media screen and (min-width: 300px) and (max-width: 960px) {
      @include flex_column();
    }
  }
  .task-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 16px 32px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: inherit;
    -ms-flex-align: inherit;
    align-items: inherit;
    .icon {
      max-width: 332px;
      min-width: 240px;
      width: 46%;
      margin: 16px 32px 16px 0;
      // @media screen and (min-width: 300px) and (max-width: 960px) {
      //   // width: 100%;
      //   // margin: 16px 0;
      // }
      @media screen and (min-width: 300px) and (max-width: 425px) {
        width: 100%;
        margin: 16px 0;
      }
      .icon-view {
        background: radial-gradient(rgb(255, 248, 204), rgb(250, 213, 81));
        padding-bottom: 100%;
        height: 0;
        border-radius: 16px;
        overflow: hidden;
        position: relative;
      }
      .icon-inner {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: 50%;
        background-size: contain;
        background-image: url(https://jojo.fun/img/icon-box.a1fd31d6.png);
      }
    }
    .info {
      -webkit-box-flex: 1;
      background: #fff !important;
      -ms-flex: 1;
      flex: 1;
      min-width: 220px;
      margin: 16px 0;
      .title {
        font-size: 28px;
        font-weight: 600;
        color: #431216;
        word-break: break-word;
      }
      .brief {
        font-size: 16px;
        color: #694f4e;
        margin-top: 14px;
        word-break: break-word;
        span {
          font-size: 18px;
          color: #431216;
          font-weight: 700;
        }
      }
      .times {
        margin-top: 20px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        .time-title {
          font-size: 16px;
          color: #694f4e;
          margin-right: 8px;
        }
        .time-values {
          font-size: 18px;
          font-weight: 700;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          .time-item {
            min-width: 38px;
            height: 38px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            font-size: 16px;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            background: #f7f7f7;
            border-radius: 10px;
            padding: 0 3px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            color: #431216;
          }
          .time-sep {
            font-size: 18px;
            font-weight: 700;
            margin: 0 10px;
          }
        }
      }
      .datas {
        margin-top: 20px;
        -webkit-box-shadow: 0 6px 12px 0 rgb(0 0 0 / 6%),
          0 -1px 2px 0 rgb(0 0 0 / 2%);
        box-shadow: 0 6px 12px 0 rgb(0 0 0 / 6%), 0 -1px 2px 0 rgb(0 0 0 / 2%);
        border-radius: 16px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        .data-item {
          padding: 16px;
          -webkit-box-flex: 1;
          -ms-flex: 1;
          flex: 1;
          .item-title {
            color: #694f4e;
            font-size: 14px;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
          }
          .payment-list {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
          }
          .payment-item {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            font-size: 14px;
          }
          .selected {
            font-weight: 700;
            color: #fad551;
          }
          .item-inner {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            cursor: pointer;
            margin-right: 10px;
            img {
              width: 16px;
              height: 16px;
              margin-right: 5px;
              -webkit-transform: translateY(-0.5px);
              transform: translateY(-0.5px);
            }
          }
          .payment-item {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            font-size: 14px;
          }
          .sep {
            font-size: 14px;
            color: #694f4e;
          }
        }
      }
      .item-value {
        font-size: 28px;
        color: #431216;
        font-weight: 700;
        margin-top: 6px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        img {
          width: 24px;
          height: 24px;
          margin-right: 8px;
        }
        span {
          font-size: 14px;
          color: #694f4e;
          font-weight: 400;
          margin-left: 4px;
        }
      }
      .buttons {
        margin-top: 24px;
        .button-primary {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          height: 54px;
          font-size: 16px;
          background: #fad551;
          color: #431216;
        }
      }
    }
  }

  .task-operate {
    border-left: 1px solid #eee;
    min-width: 280px;
    max-width: 330px;
    width: 30%;
    padding: 32px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    @media screen and (min-width: 300px) and (max-width: 960px) {
      border-top: 1px solid #eee;
      border-left: none;
      width: 100%;
      min-width: auto;
      max-width:  100%;
    }
    .title {
      font-size: 20px;
      font-weight: 700;
      color: #431216;
    }
    .nft-list {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      margin-left: -9px;
      margin-right: -9px;
      margin-top: 16px;
    }
  }
  .nft-item {
    margin: 8px 9px;
    min-width: calc(33.33333% - 18px);
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    .nft-inner {
      border-radius: 8px;
      width: 100%;
      height: 0;
      padding-bottom: 100%;
    }
    img {
      vertical-align: top;
      max-width: 100%;
    }
    .nft-title {
      margin-top: 12px;
      font-size: 12px;
      line-height: 1.2;
      color: #431216;
      word-break: break-word;
      text-align: center;
    }
  }
}
</style>
